﻿@model IEnumerable<CoreLims.Models.CoreLims.CommonSupplier>

@{
    ViewBag.Title = "供应商管理";
}

<style type="text/css">
    .changeblueColor {
        background: #f2e18c !important;
    }
</style>

<div class="row col-md-12 ml-0 vh-3">
    <strong class="font-rfs">供应商管理</strong>
</div>
<div class="row col-md-12 ml-0 min-vh-90">
    <div class="row col-md-12 min-vh-90" style="padding-right:0">
        <div class="row col-md-12 vh-5">
            <button id="addSupplier" class="btn btn-rfs"><i class="bi-plus-square"></i> 添加</button>
            <button id="editSupplier" class="btn btn-rfs"><i class="bi-pencil-square"></i> 编辑</button>
            <button id="deleteSupplier" class="btn btn-rfs" style="margin-left:4px"><i class="bi-trash"></i> 删除</button>
        </div>
        <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-12 min-vh-85 pre-scrollable">
            <table id="Supplier" class="table table-striped table-bordered table-sm table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>代码</th>
                        <th>名称</th>
                        <th>类型</th>
                        <th>地址1</th>
                        <th>地址2</th>
                        <th>国家</th>
                        <th>省份</th>
                        <th>城市</th>
                        <th>邮编</th>
                        <th>电话</th>
                        <th>传真</th>
                        <th>联系人</th>
                        <th>联系人电话</th>
                        <th>电子邮件</th>
                        <th>公司网址</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="modalTitle" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <div id="Embed"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="DeleteConfirm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p class="pt-3 pl-3 font-rfs">删除</p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <p class="font-rfs">确认删除当前选中记录吗？</p>
            </div>
            <div class="modal-Delete-footer">
                <button id="modal-delete" class="btn btn-outline-primary border-radius-noradius noLeftBorder noRightBorder font-rfs" style="width:50%; height:fit-content">删除</button>
                <button id="modal-cancel" data-dismiss="modal" class="btn btn-outline-primary border-radius-noradius noRightBorder font-rfs" style="width:50%; height:fit-content">取消</button>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        var columns = [{ field: "supplierId", visible: false }, { field: "supplierCode" }, { field: "supplierName" }, { field: "supplierType" },
            { field: "address1" }, { field: "address2" }, { field: "nation" }, { field: "province" }, { field: "city" }, { field: "zipCode" },
            { field: "telephone" }, { field: "fax" }, { field: "contacts" }, { field: "contactTelephone" }, { field: "email" },
            { field: "website" }, { field: "note" }];

        var supplierId = "";

        $('#Supplier').bootstrapTable({
            method: 'post',
            url: "GetSupplierList",
            dataType: "json",  // 服务器端返回值类型
            contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
            queryParams: function (params) {
                var data = {
                    //Site: site,  // 传递的参数，这的名称要和控制器里对应的参数名称一样
                };
                return data;
            }, //参数
            queryParamsType: "search", //参数格式,发送标准的RESTFul类型的参数请求

            uniqueId: "supplierId",          // 设置主键
            search: true,  // 显示查询工具栏
            pagination: true,  // 显示分页条,设为true，启用了分页功能
            pageSize: 7,   // 默认页大小
            pageList: [5,7,10,12, 15, 20],  // 控制每页数目
            showColumns: true,  // 可控制列的隐藏和显示
            showRefresh: true,  // 显示刷新按钮
            //showToggle: true,  // 
            locale: "zh-CN",
            columns: columns,          // 加载列定义, 注意！这个地方绑定的列名称开头大写字母会全部变成小写。
            onClickRow: function (row, $element, field) {
                $("#Supplier").find("tbody").find("tr").each(function () {
                    $(this).removeClass('changeblueColor');
                });
                $element.addClass("changeblueColor");
                supplierId = row.supplierId;
            },
            silent: true,  //刷新事件必须设置
            formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },
            formatNoMatches: function () {  //没有匹配的结果
                return '无符合条件的记录';
            },
            onLoadError: function (data) {
                $('#Supplier').bootstrapTable('removeAll');
            },
            formatShowingRows: function (pageFrom, pageTo, totalRows) {
                return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
            },
            formatRecordsPerPage: function (pageNumber) {
                return " 每页显示" + pageNumber + '条记录';
            }
        });

        $("#deleteSupplier").click(function () {
            if (supplierId == "") {
                return false;
            }

            $("#DeleteConfirm").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $("#modal-delete").click(function () {
            $.post("deleteSupplier", {
                SupplierId: supplierId
            }, function (data) {
                if (data == "删除成功！") {
                    $('#Supplier').bootstrapTable('removeByUniqueId', supplierId);  // 删除指定的行
                    supplierId = "";  // 删除行后，将这个值置空，否则直接编辑信息就会报错。
                } else {
                    alert(data);
                }
            });

            $("#DeleteConfirm").modal('hide');
        });

        $("#addSupplier").click(function () {
            $("#modalTitle").text("添加供应商");

            $("#myModal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $("#addSupplier", parent.document.body).attr("src", "AddSupplier");
            $.post("AddSupplier", function (datas) {
                $("#Embed").html(datas);
            });
        });

        $("#editSupplier").click(function () {
            if (supplierId == '' || supplierId == null || supplierId == undefined) {
                alert("请先选择需要编辑的供应商！");
                return;
            }

            $("#modalTitle").text("编辑供应商信息");

            $("#myModal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("AddSupplier", {
                SupplierId: supplierId
            }, function (datas) {
                $("#Embed").html(datas);
            });
        });

    </script>
}
